<template>
	<view class="page">
		<view class="top-img">
			<image style="width: 100%" src="/static/image/home-top-bg.png"></image>
			<view class="banner">
				<image src="/static/image/banner.png" style="height: 362rpx"></image>
			</view>
		</view>
		<view class="list">
			<view class="item" style="margin-right: 15rpx" @click="shapeUrl()">
				<image src="/static/image/home-bg4.png"></image>
				<view class="text">会议室预约</view>
			</view>
			<view class="item" @click="goUrlByType()">
				<image src="/static/image/home-bg3.png"></image>
				<view class="text">
					物业维修服务预约
					<!-- <view style="font-size: 24rpx; color: rgba(153, 153, 153, 1); margin-top: 12rpx">敬请期待！</view> -->
				</view>
			</view>
			<!-- <view class="item" style="margin-right: 15rpx">
				<image src="/static/image/home-bg2.png"></image>
				<view class="text">
					团餐服务预约
					<view style="font-size: 24rpx; color: rgba(153, 153, 153, 1); margin-top: 12rpx">敬请期待！</view>
				</view>
			</view>
			<view class="item">
				<image src="/static/image/home-bg.png"></image>
				<view class="text">
					活动预约
					<view style="font-size: 24rpx; color: rgba(153, 153, 153, 1); margin-top: 12rpx">敬请期待！</view>
				</view>
			</view> -->
		</view>
		<view class="title">
			<image src="/static/image/icon-4.png"></image>
			<view class="text">会议室预约</view>
		</view>
		<view v-if="makeList.length>0">
			<meeting-card :list="makeList" @book="goUrl"></meeting-card>
		</view>
		<view v-else class="none">暂无数据</view>
	</view>
</template>

<script>
	import {
		getList,
		getPath
	} from '@/api/main/main';
	import request from '@/utils/request';
	import MeetingCard from '@/components/meeting/meetingCard.vue'

	export default {
		components: {
			MeetingCard
		},
		data() {
			return {
				makeList: [],
				path: getPath(),
				isComponentVisible: false
			};
		},
		onShow() {
			this.selectList();
		},
		methods: {
			goUrlByType() {
				uni.showToast({
					title: '敬请期待！',
					icon: 'none'
				})
			},
			goUrl(item) {
				if (!uni.getStorageSync("token")) {
					uni.showToast({
						title: '请前往登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 2000)
					return
				}
				uni.navigateTo({
					url: './details?item=' + JSON.stringify(item)
				});
			},
			// 手动刷新组件
			reloadComponent() {
				this.isComponentVisible = false; // 销毁组件
				console.log("isComponentVisible", this.isComponentVisible);
				this.$nextTick(() => {
					this.isComponentVisible = true; // 重新挂载组件
					console.log("isComponentVisible", this.isComponentVisible);
				});
			},
			selectList() {
				const _this = this;
				getList({}).then((res) => {
					_this.makeList = res.data;
					// _this.reloadComponent();
				});
			},
			shapeUrl() {
				uni.switchTab({
					url: '/pages/shape/index'
				});
			}
		}
	};
</script>

<style>
	.page {
		background: rgba(245, 245, 245, 1);
		height: 100vh;
		overflow-y: auto;
	}

	.top-img {
		position: relative;
	}

	.top-img .banner {
		position: absolute;
		top: 188rpx;
		width: 100%;
		padding: 0 30rpx;
	}

	.top-img .banner image {
		width: 100%;
		border-radius: 30rpx;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		margin-top: 100rpx;
	}

	.list .item {
		width: 336rpx;
		height: 176rpx;
		position: relative;
		margin-bottom: 16rpx;
	}

	.list .item image {
		width: 100%;
		height: 176rpx;
	}

	.list .item .text {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		font-weight: 500;
		font-size: 28rpx;
	}

	.title {
		padding-left: 30rpx;
		margin-top: 50rpx;
		position: relative;
	}

	.title image {
		width: 160rpx;
		height: 14rpx;
	}

	.title .text {
		font-size: 36rpx;
		position: absolute;
		top: -20rpx;
		left: 30rpx;
	}

	.hylist {
		padding: 0 30rpx;
	}

	.hylist .hy-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		margin-bottom: 20rpx;
	}

	.hy-title {
		color: rgba(34, 34, 34, 1);
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.right {
		width: 60%;
		margin-left: 30rpx;
	}

	.hy-item image {
		border-radius: 20rpx;
	}

	.right .ddaress {
		margin-bottom: 20rpx;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-b {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mb-16 {
		margin-bottom: 16rpx;
	}

	.right .distance {
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
	}

	.right .btn {
		background: rgba(100, 194, 149, 1);
		border-radius: 8rpx;
		padding: 12rpx 20rpx;
		color: #fff;
	}
</style>